<template>
  <div>
    <!-- Grid 宫格 尝试失败 -->
    <van-row type="flex" gutter="22" justify="space-between" class="span-style">
      <van-col span="8">
        <span @click="$router.push('/business')">入驻商务部</span>
      </van-col>
      <van-col span="8">
        <span @click="$router.push('/professional')">家政求职</span>
      </van-col>
      <van-col span="8">
        <span @click="$router.push('/Lookhousekeeping')">找家庭服务</span>
      </van-col>
      <van-col span="8">
        <span>线上家政培训</span>
      </van-col>
      <van-col span="8">
        <span>线上家政保险</span>
      </van-col>
      <van-col span="8">
        <span>合同</span>
      </van-col>
    </van-row>
    <!-- 圆形导航 -->
    <van-row type="flex" justify="space-between" class="span-style-round">
      <van-col span="6" @click="$router.push('/server')">
        <van-image
          round
          width="55"
          height="55"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="nav-name-round">月嫂</p>
      </van-col>
      <van-col span="6" @click="$router.push('/server')">
        <van-image
          round
          width="55"
          height="55"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="nav-name-round">育婴师</p>
      </van-col>
      <van-col span="6" @click="$router.push('/server')">
        <van-image
          round
          width="55"
          height="55"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="nav-name-round">保洁/清洁</p>
      </van-col>
      <van-col span="6" @click="$router.push('/server')">
        <van-image
          round
          width="55"
          height="55"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="nav-name-round">保姆</p>
      </van-col>
      <van-col span="6" @click="$router.push('/server')">
        <van-image
          round
          width="55"
          height="55"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="nav-name-round">产康师</p>
      </van-col>
      <van-col span="6" @click="$router.push('/server')">
        <van-image
          round
          width="55"
          height="55"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="nav-name-round">早教/托育</p>
      </van-col>
      <van-col span="6" @click="$router.push('/server')">
        <van-image
          round
          width="55"
          height="55"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="nav-name-round">养老/陪护</p>
      </van-col>
      <van-col span="6" @click="$router.push('/server')">
        <van-image
          round
          width="55"
          height="55"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="nav-name-round">家装/搬家</p>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  created () {

  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.van-grid-item__content {
  background-color: #ccc !important;
  // @grid-item-content-background-color: #ccc;
  height: 60px;
}
.span-style {
  padding-top: 40px;
  // padding-bottom: 28px; 刚好发现 每个span距离下面都是28 也就不需要盒子地边框padding 了
}
.span-style span {
  margin-bottom: 28px;
  display: inline-block;
  border-radius: 12px;
  width: 210px;
  height: 174px;
  background-color: #EEECEC;
  font-size: 24px;
  text-align: center;
  line-height: 174px;
}
.span-style-round .van-col {
  text-align: center;
  // display: flex;
}
.nav-name-round {
  font-size: 28px;
  margin: 0;
  margin-bottom: 40px;
}

</style>
